<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta charset="UTF-8">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/style.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath }/css/font-awesome.min.css">
    <script src="${pageContext.request.contextPath }/js/jquery.min.js"></script>
    <title>Login&Register</title>
</head>
<body>
<div class="login-bg">
    <div class="module form-module">
        <div class="toggle"><i style="margin-top: 9px;" class="fa fa-lg fa-times fa-pencil"></i></div>
        <div class="form">
            <h2>Login to your account</h2>
                <input type="text" id="loginName" name="loginName" placeholder="Username..."/>
                <input type="password" id="loginPwd" name="loginPwd" placeholder="Password..."/>
                <span id="info"></span>
                <button onclick="login()">Login</button>
        </div>
        <div class="form">
            <h2>Create an account</h2>
            <%-- <form action="${pageContext.request.contextPath }/client/regist"> --%>
                <input type="text" name="cname" id="cname" placeholder="Username" onblur="checkUser();" required/>
                <span id="info2"></span>
                <input type="number" name="ctel" id="ctel" placeholder="Phone Number" onblur="checkSubmitMobil()" required/>
                <span id="info4"></span>
                <input type="text" name="caddress" id="caddress" placeholder="Address" required/>
                <input type="password" name="cpassword" id="cpassword" placeholder="Password" required/>
                <input type="password" name="cpasswordpwd" id="cpasswordpwd" onblur="checkPassword()" placeholder="Password Confirm" required/>
                <span id="info3"></span>
                <button type="button" id="regist">Register</button>
            <!-- </form> -->
        </div>
        <div style="display:none" class="cta"><a href="javascript:void(0)">Forgot your password?</a></div>
    </div>
</div>
</body>
<script>
    // Toggle Function: CSS style control
    

	function getQueryString(name) {
		var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
		var r = window.location.search.substr(1).match(reg);
		if (r != null)
			return unescape(r[2]);
		return null;
	}
	
	if(getQueryString('register')){
		$('.form').animate({
			height : "toggle",
			'padding-top' : 'toggle',
			'padding-bottom' : 'toggle',
			opacity : "toggle"
		}, "slow");
	}

	$('.toggle').click(function() {
		// Switches the Icon
		$(this).children('i').toggleClass('fa-pencil');
		// Switches the forms
		$('.form').animate({
			height : "toggle",
			'padding-top' : 'toggle',
			'padding-bottom' : 'toggle',
			opacity : "toggle"
		}, "slow");
	});

	$("#regist").click(function() {
		var cname = $("#cname").val();
		var ctel = $("#ctel").val();
		var caddress = $("#caddress").val();
		var cpassword = $("#cpassword").val();

		$.ajax({
			type : "POST",//请求方式
			url : "client/regist",//请求路径
			dataType : "json",
			data : {
				"cname" : cname,
				"ctel" : ctel,
				"caddress" : caddress,
				"cpassword" : cpassword
			},//传参
			success : function(msg) {
				location.href = "login.jsp";
			},
			error : function() {
				alert("修改失败");
			}
		})
	});

	function login() {
		if ($("#loginName").val() == "" || $("#loginPwd").val() == "") {
			$("#info")
					.html(
							"<font color=red>username or password should not be empty!</font>");
			return;
		}
		$.ajax({
			type : 'post',
			url : 'client/login',
			dataType : 'json',
			data : {
				"cname" : $("#loginName").val(),
				"cpassword" : $("#loginPwd").val()
			},
			success : function(data) {
				if (data.status) {
					window.location.href = "index";
				} else {
					$("#info").html(
							"<font color=red>" + data.message + "</font>");
				}
			},
			error : function(data) {
				alert(date.message + "error");
				$("#info").html("<font color=red>" + data.message + "</font>");
			}
		});
	}

	function checkUser() {
		$
				.ajax({
					type : 'post',
					url : 'client/exists',
					dataType : 'json',
					data : {
						"cname" : $("#cname").val()
					},
					success : function(data) {
						if (data.status) {
							$("#info2").html(
									"<font color=red>" + data.message
											+ "</font>");
							$("#cname").focus();
						} else {
							$("#info2").html(
									"<font color=green>" + data.message
											+ "</font>");
						}
					},
					error : function(data) {
						$("#info2").html(
								"<font color=red>" + data.message + "</font>");
					}
				});
	}

	function checkPassword() {
		var pwd = $("#cpassword").val();
		var confirmPwd = $("#cpasswordpwd").val();
		if (pwd != confirmPwd) {
			var show = "<font color='red'>两次密码输入不一致</font>";
			$("#info3").html(show);
			$("#cpassword").focus();
		}
	}

	function checkSubmitMobil() {
		if ($("#ctel").val() == "") {
			var show = "<font color='red'>phone should be input!</font>";
			$("#info4").html(show);
		}

		if (!$("#ctel").val().match(/^(((13[0-9]{1})|159|153)+\d{8})$/)) {
			var show = "<font color='red'>电话号码输入格式错误!</font>";
			$("#info4").html(show);
		} else {
			$("#info4").html("");
		}
	}
</script>
</html>